<template>
  <div class="loginContainer">
      <div class="loginBox">
        <h3>登录页面</h3>
        <!-- 添加ref属性，从而通过loginContainer的$refs拿到 loginform这个组件-->
        <el-form :model="loginformaa" ref="LoginForm" :rules="rules" label-width="0px">
            <!-- 用户名 -->
            <el-form-item prop="username">
                <el-input v-model="loginformaa.username" prefix-icon="iconfont icon-user" ></el-input>
            </el-form-item> 
            <!-- 密码 -->
            <el-form-item prop="password">
                <el-input type="password" v-model="loginformaa.password" prefix-icon="iconfont icon-3702mima"></el-input>
            </el-form-item> 
            <!-- 按钮 -->
            <el-form-item class="flex-r">
                <el-button type="primary" @click="checkForm">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item> 
        </el-form>
      </div>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
      loginformaa:{
        username:'admin',
        password:'123456'
      },
      rules:{
        username:[
            { required: true, message: '请输入用户名!', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password:[
            { required: true, message: '请输入密码!', trigger: 'change' },
            { min: 6, max: 16, message: '长度在 3 到 16 个字符', trigger: 'change' }
        ]
      }
    }
  },
  created(){},
  mounted(){},
  watch:{},
  computed:{},
  methods:{
    resetLoginForm(){
      //console.log(this.$refs.loginform);  //loginContainer组件
      // 给el-form组件添加重置事件
      this.$refs.LoginForm.resetFields();

    },
    checkForm(){
      this.$refs.LoginForm.validate(val=>{
        //console.log(val);  //会拿到一个布尔值，如果是true意味着输入正确
        if(!val){
          return this.$message.error('输入错误!')
        };

        // 输入正确的情况
        // 发送axios请求登录验证接口,判断是否存在该账户

        let p=new Promise((resolve,reject)=>{
          this.$axios.post('login',{
            username:this.loginformaa.username,
            password:this.loginformaa.password,
          }).then(info=>{
            resolve(info);  //根据拿到的数据，如果数据里的status状态不为200的话，
          })
        })
        p.then(val=>{
          if(val.meta.status!=200){
            return this.$message.error('账户或者密码错误!')
          }

          // 输入正确的情况
          // console.log(val);
          this.$message.success('登录成功!');
          // 把token存到本地sessionStorage
          window.sessionStorage.setItem('token',val.data.token);
          // 编程导航去主页
          this.$router.push('/main');
        })



      })
    }
  },
}
</script>
<style lang="css" scoped>
  .loginContainer{
    height:100%;
    background-color: #4d4d4d;
  }
  .loginBox{
    width: 600px;
    background-color: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 40px;
    box-sizing: border-box;
  }
  .loginBox h3{
    margin: 30px 0;
  }
  .flex-r{
    display: flex;
    justify-content: flex-end;
  }
</style>